<%--
  Created by IntelliJ IDEA.
  User: liandyao01
  Date: 2020/2/28
  Time: 13:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="UTF-8">
  <title>webSocket演示</title>
  <script crossorigin="anonymous" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>


  <%--<style>
    .main{
      width: 78%;
      float:left;
      border: 1px solid #fff53e;
    }

    .right{
      width: 18%;
      float:left;
      height: 500px;
      border: 1px solid #0bff4f;
    }

    #msg{
      height: 300px;
      border: 1px solid #ff99ff;
      overflow: auto;
    }

    #status_msg{
      font-size:16px;
      color:#ff0000;
      height: 40px;
      line-height: 40px;
    }

    body{
      background: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2451143812,231039263&fm=26&gp=0.jpg")  ;

    }

    #users{
      list-style: none;
      padding:0px;
    }

    #users li{
      border: 1px solid #ffd6eb;
      height:40px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }

    #users li:hover{
      background: #ff99ff;
    }
  </style>--%>


  <%--<script>
    var webSocket  = null ;//定义一个对象;
    $(function(){
        var userName = "${userName}";
        if(userName==""){
          location.href="";
          return ;
        }

        //轮询,1000毫秒执行一次
        setInterval(queryAllUsers,1000);

        chooesUser();

        console.info("正在打开连接......");
        var url = "ws://"+location.host+"/webSocket/"+userName; //服务器地址
        webSocket = new WebSocket(url);
        //连接时
        webSocket.onopen=function(){
          $("#status_msg").html("服务器已经连接上");
        }
        //当服务器有信息传过来时
        webSocket.onmessage=function(event){
          var message = event.data ;//是接收到的信息
          if(message.indexOf("COUNT:")>-1){
            $("#online").html("当前在线人数:"+message.split(":")[1]);
          }else if(message.indexOf("ERROR:")>-1){
            $("#status_msg").html(message);
          }else{
            $("#msg").prepend("<p>"+message+"</p>");
          }

        }
        //当服务器出错时
        webSocket.onerror=function () {
          $("#status_msg").html("服务器出错!");
        }


      $("#btn_send").on("click",function () {
        var nikeName = $("#nikeName").val();
        var accept = $("#accept").val();
        var text = $("#chatWord").val();
        if(text!=""){
          if(webSocket==null){
            $("#status_msg").html("请先点击开启连接!");
            return ;
          }
          webSocket.send(nikeName+"对["+accept+"]说:"+text);
        }
      });

      $("#btn_close").on("click",function () {
        if(webSocket==null){
          $("#status_msg").html("请先点击开启连接!");
          return ;
        }
        //关闭连接
        if(webSocket.readyState==1){
          webSocket.close();
        }

        $("#status_msg").html("已经关闭连接!");
        webSocket = null ;
      })

    });

    function queryAllUsers(){
      var url = "http://liandyao.vicp.net/ManagerServlet?action=queryAllUsers";
      $.post(url,null,function(mes){
          $("#users").html("<li onclick='chooesUser(this)'>全部</li>");
          $.each(mes,function(index,item){
            $("#users").append("<li onclick='chooesUser(this)'>"+item+"</li>");
          })
      },"json")
    }


    function chooesUser(obj){
      console.info($(obj).text());
      var nikeName = $("#nikeName").val();
      if(nikeName==$(obj).text()){
        alert("不能给自己发信息!");
        return ;
      }
      $("#accept").val($(obj).text());
    }
    //关闭浏览器时,执行这里面的代码
    window.onunload=function () {
      //关闭连接
      if(webSocket!=null && webSocket.readyState==1) {
        webSocket.close();//如果webSocket不为空,并且它的状态是OPEN的(1)就可以关闭
      }
    }
  </script>--%>
</head>
<body>
    This jsp;
<%--<div class="main">--%>
  <%--<div>--%>

    <%--<span>昵称:<input type="text" id="nikeName" size="5" readonly value="${userName }"></span>:--%>
    <%--<span>发送给:<input type="text" id="accept" readonly></span>--%>
    <%--<span><input type="text" id="chatWord" size="30"></span>--%>
    <%--<span><input type="button" value="发送" id="btn_send"></span>--%>
  <%--</div>--%>
  <%--<div class="middle">--%>
    <%--<!-- 显示状态信息的div -->--%>
    <%--<div id="status_msg">--%>

    <%--</div>--%>

    <%--<h3>聊天信息:</h3>--%>
    <%--<!-- 显示聊天记录的div -->--%>
    <%--<div id="msg">--%>

    <%--</div>--%>
  <%--</div>--%>
  <%--<div>--%>



    <%--<span><input type="button" value="关闭连接" id="btn_close"></span>--%>

  <%--</div>--%>
<%--</div>--%>
<%--<div class="right">--%>
  <%--<!-- 显示在线人数 -->--%>
  <%--<span id="online"></span>--%>
  <%--<!-- 显示在线人员 -->--%>
  <%--<ul id="users">--%>

  <%--</ul>--%>
<%--</div>--%>
</body>
</html>
